<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">咨询订单详情</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap">
			<view class="sqZxsInfo">
				<view class="ogzNameInfo hasFlex">
					<view class="ogzLogo"></view>
					<view class="ogzName">濮阳市心理咨询师协会</view>
				</view>
				<view class="yyUserInfo hasFlex">
					<view class="userHead orderDet"></view>
					<view class="userInfoCon">
						<view class="userInfo spaceBet alignCen">
							<view class="userName">张珊珊</view>
							<!-- comp wait -->
							<view class="orderStatus comp">已完成</view>
						</view>
						<view class="zxsLevel">二级心理咨询师</view>
						<view class="zxType hasFlex alignCen">
							<image class="zxTypeImg" :src="getStaticFilePath('mdm.png')"></image>
							<!-- <image class="zxTypeImg" :src="getStaticFilePath('shipin.png')"></image> -->
							<!-- <image class="zxTypeImg" :src="getStaticFilePath('yuyin.png')"></image> -->
							<text>面对面</text>
						</view>
					</view>
				</view>
				<view class="sqOrderDetPrice spaceBet">
					<view>实付款</view>
					<view class="yyPrice">
						<text>¥</text>
						<text class="price">29.9</text>
					</view>
				</view>
			</view>
			<view class="ogzItem">
				<view class="ogzName spaceBet">
					<text>机构地址</text>
					<text class="iconfont icon-daohang"></text>
				</view>
				<view class="ogzAdd">
					<text class="iconfont icon-weizhi"></text>
					<text>反倒是李开复辜负大家立刻给甲方的给房价多少离开</text>
				</view>
			</view>
			<view class="comDet">
				<view class="orderInfoTit">咨询信息</view>
				<view class="infoItem">
					<view>咨询人信息</view>
					<view class="infoItemCon">张珊珊</view>
				</view>
				<view class="infoItem">
					<view>联系方式</view>
					<view class="infoItemCon">15236363636</view>
				</view>
				<view class="infoItem">
					<view>咨询方式</view>
					<view class="infoItemCon">面对面咨询</view>
				</view>
				<view class="infoItem">
					<view>咨询时间</view>
					<view class="infoItemCon">2023-12-20</view>
				</view>
			</view>
			<view class="comDet">
				<view class="sqOrderTit">订单信息</view>
				<view class="sqOrderInfoItem">
					<view>订单金额</view>
					<view class="infoItemCon">¥29.9</view>
				</view>
				<view class="sqOrderInfoItem">
					<view>实付金额</view>
					<view class="infoItemCon">¥29.9</view>
				</view>
				<view class="sqOrderInfoItem">
					<view>下单时间</view>
					<view class="infoItemCon">2023-12-20 20:12:22</view>
				</view>
				<view class="sqOrderInfoItem">
					<view>订单状态</view>
					<view class="infoItemCon specCol">待支付</view>
				</view>
				<view class="sqOrderInfoItem">
					<view>支付方式</view>
					<view class="infoItemCon">微信支付</view>
				</view>
			</view>
			<view class="sqOrderBtnGp hasFlex">
				<!-- <button class="comBtn goPl">去评论</button>
				<button class="comBtn viewRep">查看报告</button> -->
				<button class="comBtn whole">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
	}
</script>
<style lang="scss">
	page{background: $sq-fuf;}
</style>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	@import '@/static/scss/sqZxOrderList.scss';
	.comDet{
		padding: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}
	.sqZxsInfo{
		@extend .comDet;
		.ogzNameInfo{
			font-size: 30rpx;
			color: $sq-main0;
			font-weight: 600;
			align-items: center;
			margin-bottom: 20rpx;
			.ogzLogo{
				width: 50rpx;
				height: 50rpx;
				background: pink;
				border-radius: 50%;
				margin-right: 15rpx;
			}
		}
		.orderStatus{
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			&.comp{
				border:1rpx solid $pss-sq-main;
				background: $pss-sq-main;
				color: #fff;
			}
			&.wait,
			&.cancel{
				border:1rpx solid $sq-fue;
				background: $sq-fue;
			}
			&.wait{
				color:$pss-sq-main ;
			}
			&.cancel{
				color: $sq-main8;
			}
		}
	}
	.ogzItem{
		border-radius: 10rpx;
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.ogzName{
			height: 60rpx;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: $sq-main0;
			.icon-daohang{
				height: 100%;
				line-height: 60rpx;
				font-size: 26rpx;
				color: $pss-sq-main;
				padding-left: 60rpx;
			}
		}
		.ogzAdd{
			font-size: 24rpx; 
			color: $sq-main8;
			margin-bottom: 10rpx; 
			.icon-weizhi{
				margin-right: 10rpx;
				font-size: 26rpx;
				color: #fda915;
			}
		}
	}
</style>